<template>
  <div class="book-sale">
    <div class="book">
      <van-image :src="book.img" class="book-img" ></van-image>
      <div class="cntent">
        <div>
          <span class="book-name">{{book.title}}</span>
          <span class="book-publisher">{{book.publisher}}</span>
        </div>
        <div class="book-isbn">isbn:{{book.isbn}}</div>
        <div>
          <span class="book-price">{{book.price}}元/天</span>
<!--          <span class="book-type">{{book.type}}</span>-->
        </div>
      </div>
      <div class="book-gist">{{book.gist}}</div>
      <div class="user">
        <span class="user-name">{{user.name}}</span>
        <span class="user-school">{{user.school}}</span>
        <div>
          <van-cell title="TA的更多" style="margin-top: 2vh;"></van-cell>
        </div>
        <van-grid border="false" :column-num="3" icon-size="70px">
          <van-grid-item v-for="simpleBook in simpleBooks" :key="simpleBook.id"
                         :icon="simpleBook.img" :text="simpleBook.title" @click="bookDetail(simpleBook)"
                         icon-size="500px">
          </van-grid-item>
        </van-grid>
      </div>
    </div>

    <van-goods-action class="buy">
<!--      <van-goods-action-icon icon="chat-o" text="客服" />-->
<!--      <van-goods-action-icon icon="shop-o" text="店铺" />-->
<!--      <van-goods-action-button color="#be99ff" type="warning" text="加入购物车" @click="add_to_list" />-->
      <van-goods-action-button color="#7232dd" type="danger" text="立即购买" @click="buy_now" />
    </van-goods-action>
  </div>
</template>
<script>
  import Vue from 'vue';
  import { GoodsAction, GoodsActionIcon, GoodsActionButton,Dialog } from 'vant';
  import {ApiService} from "../../axios/apiService";

  Vue.use(GoodsAction);
  Vue.use(GoodsActionButton);
  Vue.use(GoodsActionIcon);

  const api = new  ApiService("/sale/create_sale_doc")



  export default {
    name:"bookUserSale",
    data() {
      return {
        book:{
        },
        simpleBooks: [],
        user: {
          id:1,
          name:"爱铜锣烧的盯裆猫",
          school: "西南石油大学",
          img:'',
        },
        order:{},
        reAddressId:0,
      }
    },
    mounted() {
      //从router中取出参数
      var bookId = this.$route.params.bookId;
      var sallerId = this.$route.params.userId;
      console.log("book "+bookId,"sallerId: "+sallerId)
      this.sallerId = sallerId;
      this.getUserDefautl(sallerId);
      this.getSallerInfo(sallerId)
      this.getUserBookDetail(bookId,sallerId);
      this.getUserBookList(sallerId);
    },
    methods: {
       //添加到购物车
       add_to_list() {
      },
      //立即购买
      buy_now() {
         console.log(this.user.name+"点击购买")
         var userId = api.getCookie("userId")
         if(userId == null || userId =="") {
           Dialog.alert({
             title: "系统提示",
             message:"请先登录"
           }).then(()=> {
             this.$router.push("/login")
           })
         }
         api.post({
           sallerId:this.$route.params.userId,
           buyerId:api.getCookie("userId"),
           bookTitle:this.book.title,
           bookId:this.book.id,
           price: this.book.price,
           num:1,
           defaultImg:this.book.img,
           isbn:this.book.isbn,
           reAddressId: this.reAddressId,
         }).then(res=>{
           if(res.data.code == 200 ) {
             Dialog.alert({
               title:"系统提示",
               message:"下单成功"
             })
           }
         })
      },
      //获取用户信息
      getSallerInfo(id) {
         const api = new ApiService("/user");
         api.getParams({
           userId:id
         }).then(res=>{
           this.user = res.data.data;
         })
      },
      //获取默认地址
      getUserDefautl(id) {
         const api = new ApiService("/address/user/default")
         api.getParams({id:id}).then(res=> {
           if(res.data.code == 200) {
             this.reAddressId = res.data.data.id;
             console.log("获取卖家默认地址".this.reAddressId)
           }
         })
      },
      //获取用户图书详情
      getUserBookDetail(bookId,sallerId) {
         const  api = new ApiService("/userBook/userBookDetail")
         api.getParams({
           bookId:bookId,
           userId: sallerId
         }).then(res=> {
           this.book = res.data.data;
         })
      },
      //获取用户所有书籍
      getUserBookList(sallerId) {
         const api = new ApiService("/userBook/getUserBookList")
         api.getParams({
           userId:sallerId
         }).then(res=>{
           this.simpleBooks = res.data.data;
         })
      },
      //跳转到指定的图书界面
      bookDetail(bookDetail) {
        console.log("bookId"+bookDetail.id+"userId"+this.$route.params.userId)
        this.getUserBookDetail(bookDetail.id,this.$route.params.userId)
      }
    },
  }
  //创建订单类
</script>
<style scoped>
.book-sale {
  display: grid;
}
.book {
  width: 100vw;
  height: 40vh;
}
.book-img {
  width: 100vw;
  height: 40vh;
}
.book-isbn {
  font-size: large;
  margin-top: 1vh
}
.book-name {
  font-size: x-large;
  font-weight: bold;
}
.book-gist {
  font-size: medium;
  margin-top: 1vh;
}
.book-publisher {
  float: right;
  font-size: large;
  margin-right: 2px;
}
.book-price {
  font-size: xx-large;
  color: #db3d3c;
}
.user-school {
  float: right;
}
.user {
  width: 100vw;
  height: 5vh;
  margin-bottom: 1vh;
  margin-top: 5px;
}
.book-type {
  margin-left: 5px;
}
.simpleBooK-img {
  width: 20vw;
  height: 15vh;
}
.simpleBook-item {
  display: grid;
}
</style>
